<script lang="ts" setup>
defineOptions({
  name: 'my-button'
})
const emits = defineEmits(['ok'])
</script>

<template>
  <section class="close-button" @click="emits('ok')">
    <svg
      t="1716208965831"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3140"
      width="12"
      height="12"
    >
      <path
        d="M1023.800039 36.192931L987.607108 0 511.90002 475.707088 36.192931 0 0 36.192931l475.707088 475.707089L0 987.607108l36.192931 36.192931L511.90002 548.092951l475.707088 475.707088 36.192931-36.192931-475.707088-475.707088z"
        p-id="3141"
      ></path>
    </svg>
  </section>
</template>

<style lang="scss" scoped>
.close-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover {
    background-color: #ff0000;
    .icon path {
      fill: #fff;
    } 
  }
}
.icon {
  color: #2c2c2c;
}
</style>
